<template>
  <div class="m-25 mt-65">
    <div class="normal-box-mod">
      <div class="normal-box-hd clearfix">
        <div class="normal-box-title">
          <div class="decorate-square"></div>
          <h2>用户领袋记录</h2>
        </div>
      </div>
      <Card style="margin-bottom: 10px;">
        <div class="normal-list-page-hd clearfix">
            <Col span="3" class="mr-10">
                <city @ProvinceData="childByValue"></city>
            </Col>
            <Col span="7">
                <DatePicker v-model="queryData.startTime" format="yyyy/MM/dd" type="date" placement="bottom-end" placeholder="开始时间" style="width: 200px"></DatePicker>
                &nbsp;-&nbsp;
                <DatePicker v-model="queryData.endTime" format="yyyy/MM/dd" type="date" placement="bottom-end" placeholder="结束时间" style="width: 200px"></DatePicker>
            </Col>
            <Input class="mr-10" placeholder="编号" v-model="queryData.id" style="width:200px;" />
            <Input class="mr-10" placeholder="用户姓名" v-model="queryData.name" style="width:200px;" />
            <Input class="mr-10" placeholder="地址" v-model="queryData.address" style="width:200px;" />
            <Input class="mr-10" placeholder="电话" v-model="queryData.mobilephone" style="width:200px;" />
            <Button type="primary" custom-icon="iconfont icon-chaxun" size="small" @click="inQuire">查询</Button>
        </div>
      </Card>
      <div class="normal-box-bd">
        <div class="normal-list-page-mod">
          <div class="normal-list-page-bd">
            <Table border :loading="list.loading" :columns="list.columns" :data="list.tableData"></Table>
          </div>
          <div>
            <Page :total="queryData.totalRecord" :page-size="queryData.pageSize" :current="queryData.page" show-total
              show-elevator @on-change="changePage"></Page>
            <!-- <span style="float: right;">共{{queryData.totalRecord}}条数据</span> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import gcDispenserApi from '@/api/base_sys/gcDispenser.js'
// import moment from "moment";
import { Message } from 'iview'
import city from '@/view/test/city.vue'
import global from '@/assets/js/global'

export default {
  components: {
    city
  },
  data () {
    return {
      url: '/api/gcDispenserGetbag/list',
      // 列表
      list: {
        loading: false,
        selections: [],
        // 列表展示数据
        tableData: [],
        // 表格表头
        columns: [{
          title: '机器编号',
          key: 'code',
          align: 'center',
          minWidth: 100
        },
        {
          title: '机器位置',
          key: 'machineAddress',
          align: 'center',
          minWidth: 100
        },
        {
          title: '姓名',
          key: 'name',
          align: 'center',
          minWidth: 100
        },
        {
          title: '用户卡号',
          key: 'id',
          align: 'center',
          minWidth: 100
        },
        {
          title: '手机号码',
          key: 'mobilePhone',
          align: 'center',
          minWidth: 100
        },
        {
          title: '垃圾袋编号',
          key: 'garbagebag',
          align: 'center',
          minWidth: 100
        },
        {
          title: '领取时间',
          key: 'gettime',
          align: 'center',
          minWidth: 100
        },
        {
          title: '状态',
          key: 'state',
          align: 'center',
          minWidth: 100,
          render: (h, params) => {
            if (params.row.state == '0') { return h('div', '未领取') } else if (params.row.state == '1') { return h('div', '已领取') } else { return h('div', '状态码错误') }
          }
        }

        ]
      },
      // 页面查询数据
      queryData: {
        limit: 10,
        page: 1,
        totalRecord: 0,
        machineid: '', // 机器编号
        startTime: '', // 开始时间
        endTime: '' // 结束时间
      }
    }
  },
  created () {
    this.getTableData()
  },
  methods: {
    click () {
      let getCities = this.value
    },
    // 获取列表
    async getTableData () {
      const that = this
      that.queryData.startTime = global.time(this.queryData.startTime)
      that.queryData.endTime = global.time(this.queryData.endTime)
      that.queryData.totalRecord = undefined
      let result = await gcDispenserApi.getData(that.url, that.queryData)
      console.log(result)
      that.list.tableData = result.data.list
      that.queryData.totalRecord = result.data.totalRecord
      that.queryData.limit = result.data.pageSize
    },
    childByValue (newObject) {
      this.queryData.provid = newObject.provid || ''
      this.queryData.cityid = newObject.cityid || ''
      this.queryData.distid = newObject.distid || ''
      this.queryData.strtid = newObject.strtid || ''
      this.queryData.commid = newObject.commid || ''
      this.queryData.comminid = newObject.comminid || ''
    },
    // 查询
    inQuire () {
		    this.queryData.page = 1
      this.getTableData()
    },
    // 每页显示记录数变更
    onPageSizeChange (pageSize) {
      this.queryData.limit = pageSize
      this.getTableData()
    },
    // 换页
    changePage (page) {
      this.queryData.page = page
      this.getTableData()
    }
  }

}
</script>
